var lunbotu = document.querySelector(".banner_content");
var uls = document.querySelector(".banner_content ul");
var lis = document.querySelectorAll(".banner_content ul li");
var prev = document.querySelector(".prev");
var next = document.querySelector(".next");
var points = document.querySelectorAll("banner_content ol li")

console.log("lunbotu=>", lunbotu);
console.log("uls=>",uls);
console.log("lis=>",lis)
console.log("获取ul 里面的第1个li标签=>", lis[0]);
console.log("prev=>",prev);
console.log("next=>",next);
console.log("points=>",points);

var width = lis[0].offsetWidth;
console.log("轮播图片的宽度值 ==》",width);

var index = 0;

var timer = null;

timer = setInterval(function (){
    index++;
    if (index > 4) {
        index = 0;
    }

    uls.style.left = -(index * width) + "px";
    console.log("ul的left值==》", uls.style.left);

},1000);// 1000ms = 1s

timer = setInterval(changeImg, 1000);

function changeImg(){
    index++;
    if (index > 4){
        index = 0;
    }
    uls.style.left = -(index * width) + "px";
    setpoints(points, index);
}

lunbotu.addEventListener("mouseover", function() {
    clearInterval(timer);
})

lunbotu.addEventListener("mouseout",function(){
    clearInterval(timer);
    timer = setInterval(changeImg, 1000)
})

prev.onclick = function () {
    console.log("鼠标点击左边按钮啦");
    clearInterval(timer);

    index--;

    if (index < 0) {
        index = 4;
    }
    uls.style.left = -(index * width)+ "px";
    setpoints(points,index)
}

next.onclick = function () {
    console.log("鼠标点击右边按钮啦")
    clearInterval(timer);

    index++;

    if (index > 4) {
        index = 0;
    }
    uls.style.left = -(index * width) + "px";
    setpoints(points, index)
}
for (var i =0; i < points.length; i++) {
    points[i].count = i;
    
    points[i].addEventListener("click", function(){

        newCount = this.count
        console.log("newCount==>", newCount);

        uls.style.left = -(newCount * width) +"px";

        setpoints(points, index)
    })
}
function setpoints(a,b ){
    for (var j =0; j < points.length; j++) {
        a[j].classList.remove("active")
    }
    a[b].classList.addEventListener("active");
}